<template>
	<div>
		<el-row :span="24">
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs">
							<div class="navbar">
								<div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
									<span>{{$t('h_recharge.title1')}}</span>
								</div>
								<div class="center">
									<img style="transform: rotate(180deg);" src="../../assets/images/yh/jiantou.png"
										alt="">
									<div class="pc_title">{{$t('h_recharge.title2')}}</div>
									<img src="../../assets/images/yh/jiantou.png" alt="">
								</div>
								<div class="left" style="justify-content: flex-end;">
									<span @click="goRecordList">{{$t('h_recharge.title3')}}</span>
								</div>
							</div>
							<div class="con">
								<div class="tabs">
									<div :class="'tabsitem ' + (index == navIndex?'active':'')"
										v-for="(item,index) in tabList" :key="index" @click="changeNav(index)">
										{{ $t(item.lang) }}
									</div>
								</div>
								<div v-if="tabList && tabList[navIndex] && tabList[navIndex]['children']">
									<div class="list">
										<div :class="'item ' + (index2 == typeIndex?'active':'')"
											v-for="(item2,index2) in tabList[navIndex]['children']" :key="index2"
											@click="changeType(index2)">
											<img :src="$F.getApiUrl()+item2.icon">
											<div class="text1">{{ $t(item2.lang) }}</div>

										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children']">
										<div class="list">
											<div :class="'item ' + (index3 == walletIndex?'active':'')"
												v-for="(item3,index3) in tabList[navIndex]['children'][typeIndex]['children']"
												:key="index3" @click="changeWallet(index3)">
												<div class="text1">{{ $t(item3.lang) }}</div>
												<div class="main_item_tab" v-if="item3.send_money_scale>0">
													<p class="item_text">{{$t('h_recharge.title4')}}{{ item3.send_money_scale*1 }}%</p>
													<p></p>
												</div>
											</div>

										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate==3">
										<div class="textbox">
											<span
												style="flex: 1;">{{$t('h_recharge.title5')}}：{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].name}}</span>
											<i class="copy"
												@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].name)">{{$t('h_recharge.title6')}}</i>
										</div>
										<div class="textbox">
											<span
												style="flex: 1;">{{$t('h_recharge.title7')}}：{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account}}</span>
											<i class="copy"
												@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account)">{{$t('h_recharge.title6')}}</i>
										</div>
									</div>
									<div style="padding-bottom: 0;" class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate==5">
											<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span
														class="text3">{{ $t('l_shoukuantupian') }}:</span>
													
												</p>
											</div>
											<div class="adress_desc">
												<img style="width: 40%;height: 100%;" :src="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].bld_pic">
											</div>
										</div>
										<div style="padding-bottom: 0;" class="balance_adress_box" v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate==4">
											<div class="adress_desc">
												<p style="display: flex;">
													<span
														class="text3">{{ $t('l_shoukuanxuanze') }}:</span>
													
												</p>
											</div>
											<select v-model="fromData.sele" @change="chageSelect" class="pcSele" >
										>
											<option :value="index" v-for="(item5,index) in tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist" :key="index">{{ item5.bank_code
 }}</option>
											
										</select>
										<div class="adress_desc" style="">
												<p style="display: flex;justify-content: space-between">
													<span
														class="text3">{{ $t('l_shoukuanren') }}: {{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_name}}</span>
													<i class="text3"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_name)">{{ $t('l_fuzhi') }}</i>
												</p>
											</div>
											<div class="adress_desc" style="">
												<p style="display: flex;justify-content: space-between">
													<span
														class="text3">{{ $t('l_shoukuanyinghang') }}: {{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_code}}</span>
													<i class="text3"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_code)">{{ $t('l_fuzhi') }}</i>
												</p>
											</div>
											<div class="adress_desc">
												<p style="display: flex;justify-content: space-between;">
													<span
														class="text3">{{ $t('l_shoukuanzhanghao') }}: {{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_number}}</span>
													<i class="text3"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_number)">{{ $t('l_fuzhi') }}</i>
												</p>
											</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate==2">
										<div class="textbox">
											<span
												style="flex: 1;">{{$t('h_recharge.title8')}}: {{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account}}</span>
											<i class="text3"
												@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account)">{{$t('h_recharge.title6')}}</i>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].price_rule">
										<div class="text3" style="margin-bottom: 15px;">{{$t('h_recharge.title9')}}</div>
										<div class="list" style="border-bottom: 0;">
											<div :class="'item item1 ' + (index4 == balanceIndex?'active':'')"
												v-for="(item4,index4) in tabList[navIndex]['children'][typeIndex]['children'][walletIndex].price_rule.split(',')"
												:key="index4" @click="changeBalance(index4)">
												<div class="text1">{{ item4 }}</div>
											</div>
										</div>
										<div class="input">
											<span>￥</span>
											<el-input
												v-if="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].custom_price == 1"
												v-model="fromData.price" />
										</div>
										<div class="huilv"
											v-if="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_coin_scale == 1">
											<span>{{$t('h_recharge.title10')}} : 1USDT
												=￥{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].coin_scale*1}}</span>
											<br>
											<span
												style="color: red;">{{$t('h_recharge.title11')}}:{{(fromData.price/tabList[navIndex]['children'][typeIndex]['children'][walletIndex].coin_scale).toFixed(4)}}USDT</span>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_name==1">
										<div class="inputlabel">
											{{$t('h_recharge.title12')}}
										</div>
										<div class="inputbox">
											<el-input :placeholder="$t('h_recharge.title13')" v-model="fromData.name">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_account==1">
										<div class="inputlabel">
											{{$t('h_recharge.title14')}}
										</div>
										<div class="inputbox">
											<el-input :placeholder="$t('h_recharge.title15')" v-model="fromData.account">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_address==1">
										<div class="inputlabel">
											{{$t('h_recharge.title16')}}
										</div>
										<div class="inputbox">
											<el-input :placeholder="$t('h_recharge.title17')" v-model="fromData.address">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_pic==1">
										<div class="inputlabel">
											<i slot="prefix" style="color: red;line-height: 3;">*</i>{{$t('h_recharge.title18')}}
										</div>
										<div class="upload_box" @click="uploadPic">
											<i v-if="!fromData.pic" class="el-icon-plus"></i>
											<img v-else :src="fromData.pic" />
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].msg">
										<div class="inputlabel">
											{{$t('h_recharge.title19')}}
										</div>
										<div class="text4">
											{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].msg}}
										</div>
									</div>
								</div>
								<div class="btn" @click="submit">{{$t('h_recharge.title20')}}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="0" :xs="24">
				<div class="recharge pageContainer">
					<div class="recharge_box anquantop">
						<div class="nav_box">
							<div class="back_icon_box" @click="goback()"></div>
							<div class="title">{{$t('h_recharge.title2')}}</div>
							<div class="right_text" @click="goRecordList">{{$t('h_recharge.title3')}}</div>
						</div>
						
					</div>
					<div class="container scroll-container">
						<div class="recharge_content">
							<div class="recharge_content_box">
								<div class="recharge_type_nav">
									<div :class="'nav_item ' + (index == navIndex?'nav_active':'')"
										v-for="(item,index) in tabList" :key="index" @click="changeNav(index)">
										<div class="nav_text">
											{{ $t(item.lang) }}
										</div>
										<!-- <div class="nav_tab_box">
											<p class="tab_text">送1%</p>
											<p></p>
										</div> -->
									</div>
								</div>
								<div>
									<div class="recharge_type_box"
										v-if="tabList && tabList[navIndex] && tabList[navIndex]['children']">

										<div class="recharge_type_main">
											<div :class="'type_main_item ' + (index2 == typeIndex?'main_active':'')"
												v-for="(item2,index2) in tabList[navIndex]['children']" :key="index2"
												@click="changeType(index2)">
												<div class="main_item_text">
													<div class="main_item_img">
														<img :src="$F.getApiUrl()+item2.icon" />
													</div>
													<div class="item_text">
														{{ $t(item2.lang) }}
													</div>
												</div>
												<!-- <div class="main_item_tab">
													<p class="item_text">送{{ item2.sent }}%</p>
													<p></p>
												</div> -->
											</div>

										</div>


										<div class="wallet_type_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children']">
											<div :class="'wallet_type_item ' + (index3 == walletIndex?'wallet_active':'')"
												v-for="(item3,index3) in tabList[navIndex]['children'][typeIndex]['children']"
												:key="index3" @click="changeWallet(index3)">
												{{ $t(item3.lang)}}

												<div class="main_item_tab" v-if="item3.send_money_scale>0">
													<p class="item_text">{{$t('h_recharge.title4')}}{{item3.send_money_scale*1}}%</p>
													<p></p>
												</div>
											</div>

										</div>
					<div style="padding-bottom: 0;" class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate==5">
											<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{ $t('l_shoukuantupian') }}:</span>
													
												</p>
											</div>
											<div class="adress_desc">
												<img style="width: 100%;height: 100%;" :src="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].bld_pic">
											</div>
										</div>
										<div style="padding-bottom: 0;" class="balance_adress_box" v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate==4">
											<div class="adress_desc">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{ $t('l_shoukuanxuanze') }}:</span>
													
												</p>
											</div>
											<select v-model="fromData.sele" @change="chageSelect" class="pcSele" >
										>
											<option :value="index" v-for="(item5,index) in tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist" :key="index">{{ item5.bank_code
 }}</option>
											
										</select>
										<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{ $t('l_shoukuanren') }}：{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_name}}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_name)">{{ $t('l_fuzhi') }}</i>
												</p>
											</div>
											<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{ $t('l_shoukuanyinghang') }}{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_code}}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_code)">{{ $t('l_fuzhi') }}</i>
												</p>
											</div>
											<div class="adress_desc">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{ $t('l_shoukuanzhanghao') }}{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_number}}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_number)">{{ $t('l_fuzhi') }}</i>
												</p>
											</div>
									</div>
										<div style="padding-bottom: 0;" class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate==3">
											<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{$t('h_recharge.title5')}}：{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].name}}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].name)">{{$t('h_recharge.title6')}}</i>
												</p>
											</div>
											<div class="adress_desc">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{$t('h_recharge.title7')}}：{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account}}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account)">{{$t('h_recharge.title6')}}</i>
												</p>
											</div>
										</div>

										<div style="padding-bottom: 0;" class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate==2">
											<div class="adress_desc">
												<p style="display: flex;word-wrap: break-word;">
													<span
														style="width: 6.2rem;">{{$t('h_recharge.title8')}}：{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account}}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account)">{{$t('h_recharge.title6')}}</i>
												</p>
											</div>
										</div>

										<div class="recharge_balance_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].price_rule">
											<div class="recharge_balance_title">
												{{$t('h_recharge.title9')}}
											</div>
											<div class="recharge_balance">
												<div :class="'recharge_balance_item ' + (index4 == balanceIndex?'balance_active':'')"
													v-for="(item4,index4) in tabList[navIndex]['children'][typeIndex]['children'][walletIndex].price_rule.split(',')"
													:key="index4" @click="changeBalance(index4)">

													{{ item4 }}

												</div>
											</div>
											<el-input :placeholder="$t('h_recharge.title21')" type="number"
												v-if="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].custom_price == 1"
												v-model="fromData.price">
												<i slot="prefix" class="balance_icon">￥</i>
											</el-input>
											<!-- <div class="balance_input_box">
											<span class="balance_icon">￥</span>
											<input type="text" placeholder="最低1, 最高100000">
										</div> -->
											<div class="input_derc"
												v-if="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_coin_scale == 1">
												<span>{{$t('h_recharge.title10')}} : 1USDT =
													￥{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].coin_scale*1}}</span>
												<br>
												<span
													style="color: red;">{{$t('h_recharge.title11')}}:{{(fromData.price/tabList[navIndex]['children'][typeIndex]['children'][walletIndex].coin_scale).toFixed(4)}}
													USDT</span>
											</div>
										</div>

										<div class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_name==1">
											<div class="adress_desc">
												{{$t('h_recharge.title12')}}
											</div>
											<el-input :placeholder="$t('h_recharge.title13')" v-model="fromData.name">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>

										<div class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_account==1">
											<div class="adress_desc">
												{{$t('h_recharge.title14')}}
											</div>
											<el-input :placeholder="$t('h_recharge.title14')" v-model="fromData.account">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>

										<div class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_address==1">
											<div class="adress_desc">
												{{$t('h_recharge.title16')}}
											</div>
											<el-input :placeholder="$t('h_recharge.title17')" v-model="fromData.address">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>

										<div class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_pic==1">
											<div class="adress_desc">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>{{$t('h_recharge.title18')}}
											</div>
											<div class="upload_box" @click="uploadPic">
												<i v-if="!fromData.pic" class="el-icon-plus"></i>
												<img v-else :src="fromData.pic" />
											</div>
										</div>

										<div class="desc_box">
											<div class="desc_title">
												{{$t('h_recharge.title19')}}
											</div>
											<div class="desc_text"
												v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].msg">
												{{tabList[navIndex]['children'][typeIndex]['children'][walletIndex].msg}}


											</div>
											<div class="desc_text">
												<p>{{$t('h_recharge.title22')}}</p>
											</div>
										</div>
									</div>

									<div class="recharge_btn" @click="submit">
										<span>{{$t('h_recharge.title20')}}</span>
									</div>
								</div>
								<!-- <div v-if="!navIndex&&navIndex!=0">
									<div class="topCon">
										<el-select v-model="value" placeholder="请选择" popper-class="elsedropdown" >
																	<el-option v-for="item in options" :key="item.value" :label="item.label"
																		:value="item.value">
																	</el-option>
																</el-select>
																<div class="total_recharge">
																	累计充值<span>￥0.00</span>
																</div>
									</div>
									<div class="list">
										<div class="listLeft">
											<div class="listLeftImg">
												<img src="../../assets/images/yh/bg.png" alt="">
											</div>
											<div class="listLeftCon">
												<div class="listLeftConTop">
													支付宝
												</div>
												<div class="listLeftConBot">
													2023-09-18 11：00
												</div>
											</div>
										</div>
										<div class="listRight">
											<div class="listRightTop">
												￥1000.00
											</div>
											<div class="listRightBot">
												订单超时
											</div>
										</div>
									</div>
				
								</div> -->

							</div>
						</div>
					</div>
					<!-- <Tabnav :activeInd="tabnavIndex"></Tabnav> -->
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import Tabnav from '../../components/Tabnav.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import {
		shrinkImage
	} from "shrinkpng";
	export default {
		components: {
			Tabnav,
			PcHedaer,
			PcDrawer
		},
		data() {
			return {
				tabnavIndex: 2,
				navIndex: 0,
				typeIndex: 0,
				walletIndex: 0,
				balanceIndex: 0,
				tabList: [],
				fromData: {
					pay_id: 0,
					address: '',
					pic: '',
					price: 0,
					account: '',
					name: '',
					sele:0,
					type:0
				},

				navs: [{
						id: 0,
						name: this.$t('h_recharge.title23'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('h_recharge.title24'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('h_recharge.title25'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('h_recharge.title26'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('h_recharge.title27'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name:this.$t('h_recharge.title28'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('h_recharge.title29'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('h_recharge.title30'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('h_recharge.title31'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1: 0,
			}

		},
		created() {

			this.paymentAll()
		},
		methods: {
			chageSelect(){

			},
			back1() {
				this.$router.go(-1)
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			async copy(text) {
				try {
					await navigator.clipboard.writeText(text);
					this.$message.success(this.$t('h_recharge.title32'))
					/* Resolved - 文本被成功复制到剪贴板 */
				} catch (err) {
					this.$message.success(this.$t('h_recharge.title33'))
					console.error('Failed to copy: ', err);
					/* Rejected - 文本未被复制到剪贴板 */
				}
			},
			submit() {
				let info = this.tabList[this.navIndex]['children'][this.typeIndex]['children'][this.walletIndex]
				if (info.open_name == 1 && !this.fromData.name) {
					return this.$message.error(this.$t('h_recharge.title34'));
				}
				if (info.open_account == 1 && !this.fromData.account) {
					return this.$message.error(this.$t('h_recharge.title35'));
				}
				if (info.open_address == 1 && !this.fromData.address) {
					return this.$message.error(this.$t('h_recharge.title36'));
				}
				if (info.open_pic == 1 && !this.fromData.pic) {
					return this.$message.error(this.$t('h_recharge.title37'));
				}
				if (this.fromData.price * 1 < info.min_price * 1 || this.fromData.price * 1 > info.max_price * 1) {
					return this.$message.error(this.$t('h_recharge.title38') + `${info.min_price*1}`+this.$t('h_recharge.title39')`${info.max_price*1}`+this.$t('h_recharge.title40'));
				}
				this.fromData.pay_id = info.id
				this.fromData.type=this.navIndex
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.paymentPay(this.fromData, (res) => {
					loading.close()
					if (res.code == 0) {
						if (res.data.type == 1) {
							if (localStorage.getItem('ISAPP')) {
								window.location.href = res.data.url
							} else {
								window.location.assign(res.data.url);
							}
						} else {
							this.fromData.pic = ''
							this.fromData.name = ''
							this.fromData.account = ''
							this.fromData.address = ''
							this.$message.success(this.$t('h_recharge.title41'));
						}
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			paymentAll() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.paymentAll({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.tabList = res.data
						if (res.data) {
							this.changeNav(0)
						}
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			changeNav(index) {
				this.navIndex = index
				this.typeIndex = 0
				this.walletIndex = 0
				this.balanceIndex = 0
				this.changeType(0)
			},
			changeType(index) {
				this.typeIndex = index
				this.walletIndex = 0
				this.balanceIndex = 0
				this.changeWallet(0)
			},
			changeWallet(index) {
				this.walletIndex = index
				this.balanceIndex = 0
				this.changeBalance(0)
			},
			changeBalance(index) {
				this.balanceIndex = index
				if (typeof this.tabList[this.navIndex]['children'][this.typeIndex]['children'][this.walletIndex]
					.price_rule != 'undefined' && this.tabList[this.navIndex]['children'][this.typeIndex]['children'][this
						.walletIndex
					].price_rule) {
					this.fromData.price = this.tabList[this.navIndex]['children'][this.typeIndex]['children'][this
							.walletIndex
						]
						.price_rule.split(',')[this.balanceIndex]
				} else {
					this.fromData.price = 0
				}
			},
			goRecordList() {
				// this.navIndex = null
				this.$router.push('./record')
			},
			goback() {
				this.$router.go(-1)
			},
			uploadPic() {
				console.log('图片上传')
				if(document.getElementById('uploads')){
					document.getElementById('uploads').remove()
				}
				let input = document.createElement('input')
				input.id = "uploads"
				input.type = 'file'
				input.accept = "image/jpg,image/jpeg,image/png"
				document.body.appendChild(input);
				input.addEventListener("change", async (e) => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});

					const file = e.target.files[0];
					const _file = await shrinkImage(file, {
						quality: 80
					});
					let formData = new FormData();
					formData.append('file', _file);
					this.$api.userUpload(formData, (res) => {
						loading.close()
						if (res.code == 0) {
							this.fromData.pic = res.data.path
						} else {
							this.$message.error(res.msg);
						}
					})
				})
				input.click()
				
			}
		}
	}
</script>
<style type="text/css">
	.elsedropdown {
		border: 0.01rem solid var(--theme-color-line);
		background-color: #171e28;
		margin-top: 3px !important;
	}

	.elsedropdown .el-select-dropdown__item {
		color: var(--theme-text-color-lighten);
	}

	.elsedropdown .popper__arrow {
		display: none;
	}
</style>
<!-- <style scoped>
	* {
		box-sizing: border-box;
	}

	/deep/.el-select .el-input .el-select__caret {
		color: #005dff;
	}

	/deep/.el-table th.el-table__cell>.cell {
		text-align: center !important;
	}

	/deep/.el-input__inner {
		width: 80px !important;
		border-radius: 15px !important;
		padding: 0 !important;
		padding-left: 5px !important;
		height: 30px !important;
		line-height: 30px !important;
		color: var(--theme-text-color) !important;
	}

	/deep/.el-input__inner::placeholder {
		color: var(--theme-text-color) !important;
	}

	/* //下拉框 */
	/deep/.el-select-dropdown {
		border: none !important;
		z-index: 999;
		background-color: rgba(1, 28, 82, 0.8) !important;
	}


	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		color: #005dff !important;
		background-color: transparent !important;
	}

	.topCon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 0.2rem;
		padding-top: 0.2rem;
		box-sizing: border-box;
	}

	.total_recharge {
		font-size: .26rem;
		color: var(--theme-text-color-lighten);
	}

	.total_recharge span {
		color: var(--theme-text-color);
		margin-left: 0.08rem;
	}
</style> -->

<style lang="less">
.pcSele {
		// max-width: 150px;
		// min-width: 90px;
		width: auto !important;
		list-style: none;
		// margin:20px 0;
		line-height: 32px;
		outline: 0;
		background-color: var(--theme-main-bg-color) !important;
		border-radius: 16px;
		box-shadow: none;
		color: var(--theme-text-color-lighten)!important;
		font-size: 12px;
		height: 32px !important;
		text-align: center;
		border-color: var(--theme-color-line);
		margin-bottom: 20px

	}
	select {
		max-width: 3.15rem;
		min-width: 1.6rem;
		width: auto !important;
		list-style: none;
		margin: 0;
		line-height: 1.5;
		outline: 0;
		background-color: var(--theme-main-bg-color) !important;
		border-radius: 0.5rem;
		box-shadow: none;
		color: var(--theme-text-color-lighten)!important;
		font-size: .2rem;
		height: 0.5rem !important;
		text-align: center;
		border-color: var(--theme-color-line);
	}

	select:focus {
		border-color: var(--theme-main-bg-color) !important;
	}

	.recharge {
		width: 100vw;
		min-height: 100vh;
		// background-color: var(--theme-main-bg-color);


		.main_item_tab {
			height: 0.32rem;
			position: absolute;
			top: -0.18rem;
			right: 0.06rem;

			.item_text {
				font-size: .18rem;
				height: 0.26rem;
				line-height: .26rem;
				padding: 0 0.04rem;
				background-color: var(--theme-secondary-color-error);
				border-radius: 0.125rem 0.125rem 0.125rem 0;
				color: #fff;
				width: 100%;
				font-weight: 300;
			}

			p:nth-child(2) {
				border-bottom: 0.07rem solid transparent;
				border-left: 0.07rem solid var(--theme-secondary-color-error);
				border-right: 0.07rem solid transparent;
				height: 0;
				width: 0;
			}
		}

		.recharge_box {
			background-color: var(--theme-main-bg-color);
			border-bottom: none;
			padding: 0.2rem 0.3rem;


			.nav_box {
				display: flex;

				.back_icon_box {
					border: solid #fff;
					border-width: 0 0.06rem 0.06rem 0;
					height: 0.2rem;
					left: 0.3rem;
					position: absolute;
					top: 0.28rem;
					transform: rotate(135deg);
					width: 0.2rem;
				}

				.title {
					color: #fff;
					font-size: .3rem;
					text-align: center;
					flex: 1;
				}

				.right_text {
					font-size: .24rem;
					right: 0.3rem;
					color: var(--theme-primary-color);
					position: absolute;
					right: 0.3rem;
				}
			}
		}

		.recharge_content {
			padding: 0.2rem;
			margin-bottom: 4rem;

			.recharge_content_box {
				position: relative;

				.recharge_type_nav {
					padding-top: 0.2rem;
					border-bottom: thin solid var(--theme-color-line);
					display: flex;

					.nav_item {
						font-size: .22rem;
						color: var(--theme-text-color-darken);
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						text-align: center;
						height: 0.72rem;
						margin-right: 0.3rem;

						.nav_text {
							font-weight: 300;
						}

						.nav_tab_box {
							height: 0.32rem;
							position: absolute;
							top: -0.02rem;

							.tab_text {
								font-size: .18rem;
								height: 0.26rem;
								line-height: .26rem;
								padding: 0 0.04rem;
								background-color: var(--theme-secondary-color-error);
								border-radius: 0.125rem 0.125rem 0.125rem 0;
								color: #fff;
								width: 100%;
								font-weight: 300;
							}

							p:nth-child(2) {
								border-bottom: 0.07rem solid transparent;
								border-left: 0.07rem solid var(--theme-secondary-color-error);
								border-right: 0.07rem solid transparent;
								height: 0;
								width: 0;
							}
						}
					}

					.nav_active {
						border-bottom: 0.04rem solid var(--theme-primary-color);
						color: var(--theme-primary-color);
					}
				}

				.recharge_type_box {
					.recharge_type_main {
						height: 100%;
						padding: 0.2rem 0;
						display: flex;
						flex-wrap: wrap;
						border-bottom: thin solid var(--theme-color-line);

						.type_main_item {
							margin-bottom: 0.2rem;
							margin: 0.1rem;
							position: relative;
							width: 2.09rem;
							border: thin solid var(--theme-color-line);
							border-radius: 0.1rem;
							height: 0.7rem;

							.main_item_text {
								align-items: center;
								display: flex;
								height: 100%;
								width: 100%;

								.main_item_img {
									border-radius: 0.05rem;
									height: 0.44rem;
									margin-left: 0.08rem;
									margin-right: 0.03rem;
									overflow: hidden;
									width: 0.44rem;

									img {
										width: 0.44rem;
										height: 0.44rem;
									}
								}

								.item_text {
									font-size: .22rem;
									flex: 1;
									color: var(--theme-text-color-darken);
									text-align: center;
								}
							}


						}

						.main_active {
							border: thin solid var(--theme-filter-active-color);
    						color: var(--theme-primary-color);
							// border: thin solid var(--theme-active-bg-color);

							.main_item_text {
								.item_text {
									color: var(--theme-primary-color);
								}
							}
						}
					}

					.wallet_type_box {
						height: 100%;
						padding: 0.2rem 0;
						display: flex;
						flex-wrap: wrap;
						border-bottom: thin solid var(--theme-color-line);
						position: relative;

						.wallet_type_item {
							position: relative;
							margin-bottom: 0.2rem;
							margin: 0.1rem;
							width: 2.09rem;
							border: thin solid var(--theme-color-line);
							border-radius: 0.1rem;
							height: 0.7rem;
							color: var(--theme-text-color);
							font-size: .18rem;
							text-align: center;
							line-height: 0.7rem;

							.main_item_tab {
								height: 0.32rem;
								position: absolute;
								top: -0.18rem;
								right: 0.06rem;

								.item_text {
									font-size: .18rem;
									height: 0.26rem;
									line-height: .26rem;
									padding: 0 0.04rem;
									background-color: var(--theme-secondary-color-error);
									border-radius: 0.125rem 0.125rem 0.125rem 0;
									color: #fff;
									width: 100%;
									font-weight: 300;
								}

								p:nth-child(2) {
									border-bottom: 0.07rem solid transparent;
									border-left: 0.07rem solid var(--theme-secondary-color-error);
									border-right: 0.07rem solid transparent;
									height: 0;
									width: 0;
								}
							}
						}

						.wallet_active {
							border: thin solid var(--theme-filter-active-color);
							color: var(--theme-primary-color);
						}

					}

					.recharge_balance_box {
						padding: 0.3rem 0;

						.recharge_balance_title {
							font-size: .24rem;
							color: var(--theme-text-color-darken);
							font-weight: 300;
							margin-bottom: 0.2rem;
						}

						.recharge_balance {
							height: 100%;
							padding-bottom: 0.2rem;
							display: flex;
							flex-wrap: wrap;

							.recharge_balance_item {
								margin-bottom: 0.2rem;
								margin: 0.1rem;
								width: 1.51rem;
								border: thin solid var(--theme-color-line);
								border-radius: 0.1rem;
								height: 0.7rem;
								color: var(--theme-text-color);
								font-size: .18rem;
								text-align: center;
								line-height: 0.7rem;
							}

							.balance_active {
								// border: thin solid var(--theme-active-bg-color);
								color: var(--theme-primary-color);
								border: thin solid var(--theme-filter-active-color);
							}
						}

						.balance_icon {
							font-size: .3rem;
							color: var(--theme-text-color-darken);
							font-weight: 700;
							position: absolute;
							top: 50%;
							left: -0.1rem;
							transform: translateY(-50%);
							font-style: normal;
						}

						// .balance_input_box {
						// 	border: thin solid var(--theme-color-line);
						// 	height: 0.7rem;
						// 	border-radius: 0.1rem;
						// 	width: 97%;
						// 	margin: auto;
						// 	position: relative;
						// 	box-sizing: border-box;

						// 	input {
						// 		background:none;
						// 		outline:none;
						// 		border:none;
						// 		color: var(--theme-text-color-darken);
						// 		height: 0.7rem;
						// 		width: 88%;
						// 		position: absolute;
						// 		left: 0.6rem;
						// 	}
						// 	input::placeholder {
						// 		color: var(--theme-text-color-lighten);
						// 	}
						// }
						.input_derc {
							font-size: .22rem;
							margin-top: 0.2rem;
							margin-left: 0.1rem;
							color: var(--theme-text-color);
						}
					}

					.upload_box {
						width: 2rem;
						height: 2rem;
						background-color: var(--theme-main-bg-color);
						border: .02rem solid var(--theme-color-line);
						border-radius: 0.1rem;
						color: var(--theme-text-color-darken);
						position: relative;
						overflow: hidden;

						i {
							line-height: 2rem;
							font-size: .4rem;
							text-align: center;
							display: block;
						}

						img {
							display: block;
							width: 100%;
							height: 100%;
						}
					}

					.balance_adress_box {
						padding: 0.3rem 0;
						border-top: thin dashed var(--theme-color-line);

						.adress_desc {
							font-size: .18rem;
							color: var(--theme-text-color-darken);
							font-weight: 300;
							margin-bottom: 0.1rem;

							span {
								display: block;
								line-height: 0.5rem;
							}

							.copy {
								display: block;
								background: var(--theme-active-bg-color);
								height: .5rem;
								padding: 0 .1rem;
								border-radius: .1rem;
								line-height: 0.5rem;
								font-style: normal;
							}
						}
					}

					.desc_box {
						font-size: .18rem;
						margin-bottom: 0.2rem;

						.desc_title {
							color: var(--theme-text-color-darken);
							font-weight: 300;
							margin-bottom: 0.08rem;
						}

						.desc_text {
							color: var(--theme-text-color-lighten);
						}
					}
				}

				.recharge_btn {
					border-radius: 0.14rem;
					font-size: .24rem;
					height: 0.7rem;
					background-color: var(--theme-primary-color);
					color: var(--theme-primary-font-color);
					text-align: center;
					line-height: 0.7rem;
					margin-bottom: 0.2rem;
				}

				.list {
					padding: 0.2rem;
					box-sizing: border-box;
					background-color: #0e131b;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 0.2rem;

					.listLeft {
						display: flex;
						align-items: center;

						.listLeftImg {
							img {
								width: 30px;
								height: 30px;
								margin-right: 0.2rem;
							}
						}

						.listLeftConTop {
							font-size: .24rem;
							color: var(--theme-text-color-darken);
						}

						.listLeftConBot {
							font-size: .22rem;
							color: var(--theme-text-color-lighten);
						}
					}

					.listRight {
						text-align: right;
						font-size: .26rem;

						.listRightTop {
							font-weight: 700;
							color: var(--theme-text-color-darken);
						}

						.listRightBot {
							color: var(--theme-secondary-color-error);
						}
					}
				}
			}
		}

	}

	.navbar {
		width: 100%;
		height: 47px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 7px;
		padding: 0 15px;
	}

	.navbar .left {
		width: 183px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		cursor: pointer;
	}

	.navbar .left i {
		font-size: 15px;
		color: var(--theme-text-color);
	}

	.navbar .left span {
		margin-left: 6px;
		font-size: 16px;
		color: var(--theme-text-color);
	}

	.navbar .center {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.navbar .center img {
		width: 59px;
		height: 7px;
	}

	.pc_title {
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: var(--theme-text-color-darken);
		display: -webkit-box;
		font-size: 19px;
		margin: -2px 9px 0;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		vertical-align: middle;
	}

	.pc_conboxs {
		.con {
			flex: 1;
			height: auto;
			background-color: var(--theme-top-nav-bg);;
			border-radius: 10px;
			position: relative;
			padding: 0 15px 15px 15px;
			margin-top: 15px;
		}

		.tabs {
			width: 100%;
			height: 47px;
			display: flex;
			justify-content: flex-start;
			padding-top: 17px;
			border-bottom: 1px solid var(--theme-color-line);
		}

		.tabsitem {
			position: relative;
			height: 29px;
			margin-right: 23px;
			border-bottom: 2px solid transparent;
			color: #fff;
			cursor: pointer;
			font-size: 14px;
		}

		.tabsitem.active {
			color: var(--theme-primary-color);
			border-bottom: 2px solid var(--theme-primary-color);
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 15px;
			padding-bottom: 7px;
			border-bottom: 1px solid var(--theme-color-line);
			position: relative;

			.main_item_tab {
				height: 32px;
				position: absolute;
				top: -10px;
				right: -6px;

				.item_text {
					font-size: 16px;
					height: 16px;
					line-height: 16px;
					padding: 0 5px;
					background-color: var(--theme-secondary-color-error);
					border-radius: 12px 12px 12px 0;
					color: #fff;
					width: 100%;
					font-weight: 300;
				}

				p:nth-child(2) {
					border-bottom: 10px solid transparent;
					border-left: 10px solid var(--theme-secondary-color-error);
					border-right: 10px solid transparent;
					height: 0;
					width: 0;
				}
			}
		}

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-bottom: 15px;
			border-radius: 7px;
			cursor: pointer;
			height: 47px;
			margin-right: 3.5%;
			position: relative;
			width: 31%;
			border: 1px solid var(--theme-color-line);
		}

		.item:nth-child(3n) {
			margin-right: 0;
		}

		.item img {
			width: 34px;
			height: 34px;
			margin-left: 6px;
			margin-right: 2px;
		}

		.item .text1 {
			flex: 1;
			text-align: center;
			color: #ffffff;
			font-size: 14px;
		}

		.item.active {
			border: 1px solid var(--theme-primary-color);
		}

		.item.active .text1 {
			color: var(--theme-primary-color);
		}

		.text3 {
			margin-top: 23px;
			color: var(--theme-text-color-darken);
			font-size: 14px;
			margin-bottom: 4px;
		}

		.item1 {
			width: 22.375%;
		}

		.item1:nth-child(3n) {
			margin-right: 3.5%;
		}

		.item1:nth-child(4n) {
			margin-right: 0;
		}

		.input {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 47px;
			border: 1px solid var(--theme-color-line);
			border-radius: 7px;
		}

		.input span {
			width: 50px;
			text-align: center;
			color: #ffffff;
			font-size: 18px;
			font-weight: 700;
		}

		.el-input {
			flex: 1;
		}

		.el-input__inner {
			width: 99% !important;
			height: 45px !important;
			border: 0 !important;
			border-radius: 0 !important;
			font-size: 14px !important;
			padding: 0 !important;
		}

		.btn {
			width: 100%;
			height: 43px;
			text-align: center;
			line-height: 43px;
			background-color: var(--theme-primary-color);
			margin-bottom: 15px;
			color: #fff;
			font-size: 15px;
			border-radius: 10px;
			cursor: pointer;
			margin-top: 15px;
		}

		.textbox {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10px;
		}

		.textbox span {
			font-size: 14px;
			color: #fff;
		}

		.textbox i {
			padding: 0 10px;
			height: 30px;
			line-height: 30px;
			border-radius: 7px;
			font-size: 14px;
			color: #fff;
			background: var(--theme-active-bg-color);
			font-style: normal;
		}

		.huilv {
			width: 100%;
			margin-top: 7px;
			font-size: 14px;
			color: var(--theme-text-color);
		}

		.inputlabel {
			font-size: 14px;
			color: var(--theme-text-color-darken);
			font-weight: 300;
			margin-bottom: 10px;
			margin-top: 23px;
		}

		.inputbox .el-input__prefix {
			left: 14px !important;
			top: 4px !important;
		}

		.inputbox .el-input__inner {
			width: 100% !important;
			border: 1px solid var(--theme-color-line) !important;
			border-radius: 7px !important;
			padding: 0 30px !important;
		}

		.upload_box {
			width: 140px;
			height: 140px;
			background-color: var(--theme-main-bg-color);
			border: 1px solid var(--theme-color-line);
			border-radius: 7px;
			color: var(--theme-text-color-darken);
			position: relative;
			overflow: hidden;

			i {
				line-height: 140px;
				font-size: 28px;
				text-align: center;
				display: block;
			}

			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.text4 {
			color: var(--theme-text-color-lighten);
			font-size: 14px;
		}
	}
	#uploads{
		position: absolute;
		top: -100px;
		left: 0;
	}
</style>